<template>
<view class="notice_list">
  <view class="notice_item" v-for="(item,index) in list" :key="index" @tap.stop="bindView(index)">
    <view class="content">
      <view class="notice_title twolist-hidden" v-html="searchHighlight(item.title)"></view>
      <view class="notice_tips onelist-hidden">{{item.createtime?setTime(item.createtime,'yyyy.MM.dd hh:ss'):''}}</view>
    </view>
    <image class="image" :src="item.image||imgPrefix('/static/image/teacher/audit_status_page_icon.png')" lazy-load  mode="aspectFill"></image>
  </view>
</view>
</template>

<script>
import {
  commonMixinFun
} from '@/static/mixins/common.js';
import {
  changeFormat
} from '@/static/mixins/changeFormat.js';
const app = getApp();
export default {
  mixins: [commonMixinFun, changeFormat],
  props: {
    keyWord: { // 高亮关键词
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: []
    },
    type: {
      type: [Number, String],
      default: 0, //  1=》公告列表
    }
  },
  data() {
    return {

    };
  },
  methods: {
    // 关键词高亮  （追加）
    searchHighlight(title) {
      app._log(this.type)
      if (this.type == 1) { //公告列表
        if (title.indexOf('】') != -1) {
          return app.searchHighlight(title.substring(0, title.indexOf('】') + 1), title, '#7F4AFF');
        } else {
          return app.searchHighlight('', title, '#7F4AFF');
        }
      } else {
        return app.searchHighlight(this.keyWord, title, '#7F4AFF');
      }
    },
    bindView(index) {
      this.$emit('bind-notice-view', index);
    }
  }
}
</script>

<style lang="scss">
.notice_item,
.notice_item .content {
  display: flex;
  justify-content: space-between;
}

.notice_list {
  padding: 48rpx;

  .notice_item {
    margin-bottom: 56rpx;

    .content {
      flex-direction: column;
      width: 438rpx;

      .notice_title {
        font-size: 32rpx;
        color: #252748;
      }

      .notice_tips {
        font-size: 24rpx;
        line-height: 34rpx;
        color: rgba(143, 143, 154, 0.7);
      }
    }

    .image {
      margin-left: 24rpx;
      width: 192rpx;
      height: 136rpx;
      border-radius: 16rpx;
    }
  }
}
</style>
